<template>
	<view>
		<mh-navbar custom center transparent zIndex="3003">
		    <template slot="left"><text>乐盒</text></template>
		    <template slot="title"><text>首页</text></template>
		    <template slot="right">
		            <view class="ml-20" ><text class="iconfont" style="color: 2e73ff;">&#xe604;</text></view>
		    </template>
		</mh-navbar>
		<view :style="{'margin-top': customBarH + 'px'}"></view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
			<view class="bjn-wrap">
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :indicator-dots="true" :indicator-active-color="'#fff'" circular>
					<swiper-item v-for="(items,index) in bannerList" :key='index'>
						<view class="swiper-item" @click="goUrl(items)">
							<image :src="appUrl + items.bannerUrl"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="jingang-wrap">
					<view class="jingang-box">
						<view class="jingang-content" @click="goSign">
							<image src="/static/img/jingang/lewanmanghe.png" style="width: 60px;height: 60px;"></image>
							<text>签到领币</text>
						</view>
					</view>
					<view class="jingang-box">
						<view class="jingang-content" @click="goRecycle">
							<image src="/static/img/jingang/kuaisuhuishou.png" style="width: 60px;height: 60px;"></image>
							<text>快速回收</text>			
						</view>
					</view>
					<view class="jingang-box">
						<view class="jingang-content">
							<image src="/static/img/jingang/fahuoliucheng.png" style="width: 60px;height: 60px;"></image>
							<text>发货流程</text>
						</view>
					</view>
					<view class="jingang-box">
						<view class="jingang-content">
							<image src="/static/img/jingang/lewanguize.png" style="width: 60px;height: 60px;"></image>
							<text>乐玩规则</text>
						</view>
					</view>
				</view>
				<view class="toutiao">
					<image src="/static/img/index/toutiao.png" style="width: 32px;height: 32px;"></image>
					<view class="toutiao-title">
						<text>乐盒头条</text><span>|</span>
					</view>
					<!-- <view class="line"></view> -->
					<view class="toutiao-new">
						<text>30秒快速叫你玩转盲盒</text>
					</view>
				</view>
			</view>
			<view class="bank-line"></view>
			<view class="newbox-container">
				<view class="newbox-wrap">
					<view class="newbox-open">
						<view class="vertical-center newbox-left">
							<image src="/static/img/index/news.png" style="width: 32px;height: 32px;"></image>
							<text>最新开盒</text>
						</view>
						<view class="vertical-center newbox-right" @click="newestBox">
							<text>更多>></text>
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="newbox-good-wrap" v-if="flag">
					<goods-swiper :datas="newestBoxs" :config="config" @change="swiperChange" @tapFun="tapFun"></goods-swiper>
				</view>
			</view>
			<view class="category-container">
				<view class="category-tab">
					<view class="vertical-center">
						<image src="/static/img/index/popular.png" style="width: 32px;height: 32px;"></image>
					</view>
					<u-tabs-swiper ref="uTabs" :list="classifyList" :current="current" @change="tabsChange"></u-tabs-swiper>
				</view>
				<swiper class="swiper_group" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{'height':scrollHeight+'px'}" >
					<swiper-item class="swiper-item" v-for="(item, index) in classifyList" :key="index">
						<scroll-view scroll-y  @scrolltolower="onreachBottom">
							 <view class='good-container'>
								 	<view v-for="(good, index) in classifyList[current].goodList" :key="index" class='good-wrap' @click="goOpen(good)">
								 			<view class="rowCenter">
								 				<image :src="appUrl + good.img" style="width: 100px;height: 100px;" ></image>
								 			</view>
								 			<view>{{good.name}}</view>
								 			<view class="standard-center">
								 				<view class="gold">¥{{good.currency}}</view>
								 				<view>{{good.open}}人开盒</view>
								 			</view>
								 	</view>
							 </view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</scroll-view>
		<view style="width: 100%;height:var(--window-bottom);"></view>
		<view v-if="isCoupon">
			<view class="mask"></view>
			<view class="box-popup-open-coupon">
					<image src="/static/img/index/coupon_bg.png"></image>
					<view class="wrapBox">
						<view class="tips">恭喜您获得！</view>
						<view class="num">{{coupons.length}}张优惠卷</view>
					</view>
					<view class="note">优惠券已放入您的账户中，点击<text style="color: #FF9900;">优惠券</text>可查看</view>
					<view class="close" @click="closeCoupon"><icon type="clear" size="30" color="#fff"/></view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../utils/util.js');
	import refresh from '@/components/refresh.vue';
	import navTab from '@/components/navTab.vue';
	export default {
		components: {refresh,navTab},
		data() {
			return {
				isCoupon:false,
				scrollTop: 0,
				flag: false,
				statusBarH: 0,
				customBarH: 0,
				appUrl:this.$store.state.vuex_config.appUrl,
				bannerList: [],
				newestBoxs:[],
				config:{
					more:true,
					autoplay:true,
					shadow:true,
					multiple:3,
					// hideMargin:true,
					// current:0,
					// interval:5000,
					// duration:500,//app-nvue不支持
					// circular:true,//如果有边距不推荐使用，效果不佳
				},
				toView:'',//回到顶部id
				goods:[],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				classifyList: [],
				scrollHeight:200,
				coupons:[],
			}
		},
		onLoad() {

		},
		created() {
			const app = getApp()
			// 获取状态栏和导航条高度
			this.statusBarH = app.globalData.statusBarH
			this.customBarH = this.custom ? app.globalData.customBarH : app.globalData.customBarH - this.statusBarH
			this.getNewestBoxs();
			this.getBannerList();
			this.initData();
			this.getGrantCoupon();
		},
		methods: {
			getGrantCoupon(){
				debugger
				this.$u.api.grantCoupons().then(res => {
					if (res.code == 200 && res.data.length>0){
						this.coupons = res.data;
						this.isCoupon = true;
					}
				});				
			},
			closeCoupon(){
				this.isCoupon = false;
			},
			getNewestBoxs(){
				this.$u.api.newestDay({pageSize:10,pageNum:1}).then(res => {
					if (res.code == 200){
						this.newestBoxs = res.data;
						this.flag = true;
					}
				});
			},
			//获取banner数据
			getBannerList() {
				debugger
				//获取banner
				this.$u.api.banners().then(res => {
					if (res.code == 200){
						this.bannerList = res.data;
					}
				});
			},
			initData() {
				debugger
				var classifyId = 1;
				var currentPage = 1;
				if(this.classifyList.length > 0){
					classifyId = this.classifyList[this.current].classifyId;
					currentPage = this.classifyList[this.current].currentPage;
				}
				this.$u.api.classifys({					
					pageNum: this.currentPage,
					pageSize: 20,
					classifyId:this.classifyId
					}).then(res => {
					if (res.code == 200){
						if(res.data.length > 0){
							console.info(this.current + ' 分类数据' + this.classifyList[this.current]);
							console.info(res.data);
							this.classifyList=res.data;
							//for (var i = 0; i < res.data.length; i++) {
								//this.classifyTabList[this.currentTab].goodList.push(res.data[i]);
							//	this.classifyTabList[this.currentTab]=res.data;
							//}
							console.info(this.classifyList);
						}
					}
				});
			},
			getClassifyBoxs(){
				var classifyId = 1;
				var currentPage = 1;
				if(this.classifyList.length > 0){
					classifyId = this.classifyList[this.current].classifyId;
					currentPage = this.classifyList[this.current].currentPage;
				}
				this.$u.api.classifyBoxs({					
					pageNum: this.currentPage,
					pageSize: 20,
					classifyId:this.classifyId
					}).then(res => {
					if (res.code == 200){
						if(res.data.length > 0){
							console.info(this.current + ' 分类数据' + this.classifyList[this.current]);
							this.classifyList=res.data;
							this.classifyList[this.current].goodList.push(data);
						}
					}
					this.classifyList[this.current].loadStatus = "loadmore";
				});
			},
			swiperChange(current){
				console.log(current);
			},
			goSign(){
				uni.navigateTo({
					url: 'pages/mine/sign_in'
				})
			},
			goRecycle(){
				uni.navigateTo({
					url: 'pages/boxcabinet/boxcabinet'
				})
			},
			goOpen(item){
				uni.navigateTo({
					url: '/pages/open/open?boxId=' + item.boxId
				})
			},
			newestBox(){
				uni.navigateTo({
					url: 'pages/open/latest_box'
				})
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				debugger
				this.swiperCurrent = index;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.classifyList[this.current].loadStatus = "loading";
				setTimeout(() => {
					this.getClassifyBoxs();
				}, 1200);
			},
			tapFun(e){
				console.log(e.type,e.id,e.index);
			}
		}
	}
</script>

<style lang="scss">
page{
	min-height: 100%;
}
/deep/.mh__navbar-wrap{
	padding: 0 10px 0 10px;
}
.swiper{
    width: 100%;
    height: 150px;
    swiper-item{
        image {
            width: 100%;
            height: 150px;
            display: block;
        }
    }
}
.bjn-wrap{
	background: #FFFFFF;
}
.jingang-wrap{
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	.jingang-box{
		width: 90px;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		.jingang-content{
			display: flex;
			flex-flow: column;
			flex-wrap: wrap;
		}
	}
}
.toutiao{
	padding: 0 10px 0 10px;
	height: 32px;
	width: 100%;
	display: flex;
	flex-direction: row;
	// justify-content: center;
	// align-items: center;
	.line{
		width: 2px;
		background:#000000;
	}
	.toutiao-title{
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.toutiao-new{
		display: flex;
		justify-content: center;
		align-items:center;
	}
}
.newbox-container{
	background: #FFFFFF;
	padding: 0 10px 0 10px;
	.newbox-wrap{
		width: 100%;
		.newbox-open{
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			.newbox-right{
				text{
					color: #97979F;
				}
			}
		}
	}
}

.category-container{
	//background: #FFFFFF;
	padding: 0 10px 0 10px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	.category-tab{
		display: flex;
		flex-direction: row;
	}
	.swiper_group{
		flex: 1;
	}
}
.swiper-item {
	height: 100%;
}

/deep/.uni-scroll-view-content{
	background-color: #f0f4f7;
}

/deep/.navTabBox{
	width: 330px;
	background: #f0f4f7;
}
/deep/.navTabBox .click{
   font-size: 18px;
}

.good-container{
	display:flex;
	flex-wrap: wrap;
	padding:10px;
	justify-content: space-between
}
.good-wrap{
	padding:5px;
	width: 49%;
	background: #FFFFFF;
	margin-bottom: 5px;
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
}
.noGood {
	width: 90%;
	height: 200upx;
	margin: auto;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.10);
	border-radius: 10upx;
}
.gold{
	font-size: 15px;
	font-weight: bold;
	color: red;
}

.mask{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	z-index:888;
	background-color: rgba(0, 0, 0, 0.6);
}

.box-popup-open-coupon{
		position: absolute;
		top:20%;
		z-index: 998;
		width:90%;
		left:5%;
		padding:10rpx 0rpx;
		height:300px;
		image{
			width:100%;
			height:100%;
		}
		.wrapBox{
			position: absolute;
			width:60%;
			left:20%;
			top:320rpx;
			padding:10rpx 0rpx;
			text-align:center;
			.tips{
				font-size:35rpx;
				color:#fff;
				font-weight:bold;
				text{
					font-weight: normal;
				}
			}
			.num{
				font-size: 35rpx;
				color:#fff;
				margin-top:30rpx;
				font-weight: bold;
				text{
					font-size: 50rpx;
				}
			}
		}
		.note{
			position: absolute;
			    bottom: 0px;
			    width: 80%;
			    margin: 10px auto;
			    text-align: center;
			    font-size: 15px;
			    color: #ffffff;
			    left: 10%;
			    font-size: 5px;
		}
		.close{
			text-align: center;
		}
}
</style>
